<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Bootstrap learn</title>

  <!-- 从cdn引入css文件 -->
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

  <!-- 添加css 使比较好观察 -->
  <style type="text/css">
    .col-xs-1,
    .col-xs-2,
    .col-xs-3,
    .col-xs-4,
    .col-xs-5,
    .col-xs-6,
    .col-xs-7,
    .col-xs-8,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8 {
      background-color: green;
      color: white;
      font-weight: bold;
      border: 1px solid red;
      height: 3em;
      /*height of the box*/
      text-align: center;
      /*vertical center the text*/
    }
  </style>

</head>

<body>

  <h1>移动设备优先</h1>
  <pre>
  移动设备优先是 Bootstrap 3 的最显著的变化。
  在之前的 Bootstrap 版本中（直到 2.x），您需要手动引用另一个 CSS，才能让整个项目友好的支持移动设备。
  现在不一样了，Bootstrap 3 默认的 CSS 本身就对移动设备友好支持。
  Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。
  为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签
  width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
  initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
  在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
  通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
  注意，这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！
</pre>



  <!-- 测试cdn 引入是否成功 -->
  <div class="dropdown">
    <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

  响应式图像

  <img src="./camera.jpg" class="img-responsive" alt="响应式图像" width="20%">

  <h2>基本网格的HTML</h2>
  <p style="font-size:14px">
    创建简单布局时，给作为行的 <br>
    div 添加.row类，给作为列的 div 添加表示横跨多少列的.col-xx-*类即可。因为网格布局可以包含12列，所 <br>
    以.col-xx-*中的*加起来必须等于12。这样，可以设计出3-6-3、4-8、3-5-4、2-8-2……布局，你懂了吧？ <br>
    <br> col-lg-4 : It will select 4 columns. Choose any number between 1-12. The ‘lg’ stand for large screen (e.g.
    <br>large computer screen).
    <br>col-md-5 : ‘md’ = medium screen
    <br>col-sm-3 : ‘sm’ = small screen
    <br> col-xs-3 : ‘xs’ = extra small screen
    <br>col-lg-offset-4 : skip first 4 columns. Simimlary use ‘md’, ‘sm’ and ‘xs’ with offset
  </p>

  <br>
  <br>

  <h4>下面的代码使用了.col-sm-8和.col-sm-4，总共横跨12列</h4>
  <div class="row">
    <div class="col-sm-8" style="background:gray">
      111111111
      <p>13214</p>
    </div>
    <div class="col-sm-4" style="background:green">
      2222222222222
    </div>
  </div>

  <br>
  <br>
  <h4>嵌套列</h4>
  <p>要嵌套列，只要在相应的.span*中再增加一个.row，然后在其中包含与父容器列数相等的.col-xx-*即可：</p>
  <div class="row">
    <div class="col-md-2 col-xs-4">col-md-2, col-xs-4</div>
    <div class="col-md-6 col-xs-4">
      <div class="row">
        <div class="col-xs-6">col-xs-6</div>
        <div class="col-xs-6">col-xs-6</div>
      </div>
    </div>
    <div class="col-md-4 col-xs-4">col-md-4, col-xs-4</div>
  </div>

  <br>
  <br>
  <h4>列偏移</h4>
  <div class="row">
    <div class="col-sm-offset-2 col-md-2">col-md-2</div>
    <div class="col-sm-8">col-md-8</div>
  </div>

  <!-- 从cdn引入 jquery bootstrap库 -->
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

</body>

</html>
